<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>门店管理</BreadcrumbItem>
      <BreadcrumbItem>门店列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="requestShop" inline>
      <FormItem>
        <Input
          type="text"
          v-model="requestShop.name"
          clearable
          placeholder="请输入门店名称"
        />
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px"
        >搜索</Button
        >
        <Button type="primary"  style="margin-right: 10px">导出</Button>
        <Button type="primary" @click="addShop" style="margin-right: 10px">添加门店</Button>
      </FormItem>
    </Form>

    <div>
      <Table :columns="columns1" :data="tableData" :height="height">
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            v-hasPermission="['37']"
            @click="onShowDevMgt(row.id)"
          >设备管理</Button
          >
        </template>
        <template slot-scope="{ row }" slot="device_count">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            v-hasPermission="['37']"
            @click="viewShopDevices(row.id)"
          >查看设备({{row.device_num}})</Button
          >
        </template>
      </Table>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page
        background
        layout="prev, pager, next"
        :page-size="params.limit"
        :total="params.total"
        @on-change="handleCurrentChange"
        :current-page="params.page"
         @on-page-size-change="handleSizeChange"
      />
    </div>
    <Modal v-model="modal1"   @on-ok="confirmAddShop" @on-cancel="cancelAddShop" :mask-closable="false">
      <Form ref="formAddShop" :model="editShop" :label-width="110" >
        <div class="door_device"><h4>门店新增</h4></div>
        <FormItem label="门店名称" prop="name">
          <Input  v-model="editShop.name" placeholder="请输入门店名称"></Input>
        </FormItem>
        <FormItem label="价格基准" prop="price_rule" >
          <Input  v-model="editShop.price_rule" value="1" ></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal3" :mask-closable="false" width="1000" :ok-text="okText" @on-ok='onBindUnBind'>
      <Form :label-width="110">
        <div><h4 class="door_device">点击绑定设备管理</h4></div>
        <Tabs     v-model='tabName' @on-click="tabClick(tabName)">
          <TabPane label="未绑定设备"  name="name1">
            <Form ref="formUnbindDevices" :model="requestDev" inline>
              <FormItem prop='device_id'>
                <Input v-model="requestDev.device_id"  type="text"  clearable placeholder="请输入设备编号" />
              </FormItem>
              <FormItem m prop='name'>
                <Input v-model="requestDev.name" type="text"  clearable placeholder="请输入设备名称" />
              </FormItem>
              <FormItem>
                <Button type="primary" @click="searchDevices" style="margin-right: 10px">搜索</Button>
              </FormItem>
              <Table ref="tableUnbindDevices" border :columns="columns3" :data="data3"></Table>
            </Form>
          </TabPane>
          <TabPane label="已绑定设备"   name="name2">
            <Form ref="formbindDevices" :model="requestDev" inline>
              <FormItem prop='device_id'>
                <Input v-model="requestDev.device_id"  type="text"  clearable placeholder="请输入设备编号" />
              </FormItem>
              <FormItem m prop='name'>
                <Input v-model="requestDev.name" type="text"  clearable placeholder="请输入设备名称" />
              </FormItem>
              <FormItem>
                <Button type="primary" @click="searchDevices" style="margin-right: 10px">搜索</Button>
              </FormItem>
              <Table ref="tablebindDevices" border :columns="columns3" :data="data3"></Table>
            </Form>

          </TabPane>
        </Tabs>
      </Form>

    </Modal>
    <Modal v-model="modal2"    :mask-closable="false">
      <Form :label-width="110">
        <div class="door_device"><h4 >门店设备</h4></div>
        <Table stripe :columns="columns2" :data="data2"></Table>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabName: 'name1',
      okText: '绑定',
      columns2: [
        {
          title: '序号',
          key: 'id'
        },
        {
          title: '设备号',
          key: 'name'
        }
      ],
      columns3: [
        {
          width: 60,
          align: 'center',
          type: 'selection'
        },
        {
          title: '设备编号',
          key: 'id'
        },
        {
          title: '设备名称',
          key: 'name'
        }
      ],
      data3: [],
      data2: [],
      editShop:
      {
        name: '',
        price_rule: 0
      },
      requestShop:
      {
        page: 1,
        name: ''
      },
      params: {
        device_time: [],
        status: 1,
        user_id: '',
        order_id: '',
        activity_id: '',
        page: 1,
        limit: 20
      },
      total: 0,
      page: {},
      height: this.$store.state.height,
      modal1: false,
      modal2: false,
      modal3: false,
      data1: [
        {
          id: 1,
          title: '机器组3'
        },
        {
          id: 2,
          title: '机器组4'
        }
      ],
      requestDev: {
        type: 1,
        shop_id: 0,
        device_id: '',
        name: ''
      },
      columns1: [
        {
          title: '门店id',
          key: 'id',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '门店名称',
          key: 'name',
          minWidth: 300,
          align: 'center'
        },
        {
          title: '设备数',
          key: 'order_money',
          slot: 'device_count',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'option',
          width: 200,
          align: 'center',
          fixed: 'right'
        }
      ],
      tableData: [],
      role_id: null
    }
  },
  mounted () {
    this.listShops()
  },
  methods: {
    confirmAddShop () {
      // this.allocated = []
      // this.undistributed = []
      this.axios.post('shop/add', this.editShop).then(res => {
        if (res.code === 1) {
          this.cancelAddShop()
          this.$Message.success('添加成功')
          this.listShops()
        };
      })
    },
    cancelAddShop () {
      this.model1 = false
      this.$refs.formAddShop.resetFields()
    },
    listShops () {
      this.axios.post('shop/shop_list', this.requestShop).then((res) => {
        console.log('----------------------')
        if (res.code === 1) {
          this.params.total = res.data.count
          this.params.curPage = res.data.curPage // 当前页
          this.params.countPage = res.data.countPage // 总页数

          this.tableData = res.data.list
        }
      })
    },
    search () {
      this.params.page = 1
      this.listShops()
    },
    addShop () {
      this.modal1 = true
    },
    tabClick (name) {
      this.tabName = name
      this.requestDev.name = ''
      this.requestDev.device_id = ''
      if (name === 'name1') {
        this.requestDev.type = 1
        this.okText = '绑定'
      }
      if (name === 'name2') {
        this.requestDev.type = 2
        this.okText = '解绑'
      }
      this.listDevices()
    },
    onShowDevMgt (shopId) {
      this.requestDev.shop_id = shopId
      this.requestDev.type = 1
      this.modal3 = true
      this.tabName = 'name1'
      this.okText = '绑定'
      this.listDevices()
    },
    searchDevices () {
      this.listDevices()
    },
    listDevices () {
      this.axios.post('shop/device_list', this.requestDev).then(res => {
        if (res.code === 1) {
          this.data3 = res.data
        };
      })
    },
    onCloseSetting () {
      this.modal3 = false
    },
    onBindUnBind () {
      let selectRows = 0
      if (this.requestDev.type === 1) {
        selectRows = this.$refs.tableUnbindDevices.getSelection()
      }
      if (this.requestDev.type === 2) {
        selectRows = this.$refs.tablebindDevices.getSelection()
      }
      if (selectRows.length === 0) {
        this.$Message.success('请选中要' + this.okText + '设备')
        return
      }
      var devIds = selectRows.map(item => item.id).join(',')
      var bindUnbindData =
      {
        shop_id: this.requestDev.shop_id,
        type: this.requestDev.type,
        device_ids: devIds
      }

      this.axios.post('shop/set_device', bindUnbindData).then(res => {
        if (res.code === 1) {
          this.$Message.success(this.okText + '成功')
          this.listShops()
        } else {
          this.$Message.success(this.okText + '失败')
        };
      })
    },
    viewShopDevices (shopId) {
      this.modal2 = true

      this.axios.post('shop/shop_device_list', { shop_id: shopId }).then(res => {
        if (res.code === 1) {
          this.data2 = res.data
        };
      })
    },
    setStatus (id, status) {
      var text = '确定要' + (status === 1 ? '启用' : '禁用') + '此机器组么？'
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success('操作成功')
        },
        onCancel: () => {}
      })
    },
    // goDel(id) {
    //   this.$router.push({ path: "/order/detail", query: { id } });
    // },
    timechange (val) {
      console.log(val)
    },
    handleSizeChange (val) {
      this.params.page = 1
      this.params.limit = val
      this.listShops()
    },
    handleCurrentChange (val) {
      this.requestShop.page = val

      this.listShops()
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.door_device{
  position: relative;
  top: -20px;
}
</style>
